<template>
  <my-dialog :mode="props.mode" title="Task" :ok="onOk" :clear="onClear">
    <q-card-section>
      <div class="q-pa-sm">
        <div class="q-gutter-y-sm row">
          <q-item-label class="col-4 fal">M' tce Type:<span style="color: red">*</span></q-item-label>
          <q-select
            borderless
            v-model="mtce_type"
            input-debounce="0"
            hide-bottom-space
            lazy-rules
            :options="['CM', 'PM', 'NM', 'IGI']"
            class="col-8 fal input-css"
            :dense="true"
          >
          </q-select>
        </div>
      </div>

      <div class="q-pa-sm">
        <div class="q-gutter-y-sm row">
          <q-item-label class="col-4 fal">Task:</q-item-label>
          <q-input
            class="col-8 fal input-css"
            borderless
            v-model="task"
            dense
          ></q-input>
        </div>
      </div>

      <div class="q-pa-sm">
        <div class="q-gutter-y-sm row">
          <q-item-label class="col-4 fal">Description:</q-item-label>
          <q-input
            class="col-8 fal input-css"
            borderless
            v-model="description"
            dense
          ></q-input>
        </div>
      </div>

      <div class="q-pa-sm">
        <div class="q-gutter-y-sm row">
          <q-item-label class="col-4 fal">Wi No:</q-item-label>
          <q-input
            class="col-8 fal input-css"
            borderless
            v-model="wi_no"
            dense
          ></q-input>
        </div>
      </div>

      <div class="q-pa-sm">
        <div class="q-gutter-y-sm row">
          <q-item-label class="col-4 fal">Type:</q-item-label>
          <q-checkbox v-model="cur_tab" label="Current Task" color="primary" />
          <q-checkbox v-model="final_tab" label="Final Check" color="primary" />
        </div>
      </div>
    </q-card-section>
  </my-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import MyDialog from 'src/components/container/MyDialog.vue';
import { useQuasar } from 'quasar';
import {
  editCurTask,
  createTask,

  getCurTask,
} from 'src/services/tasksService';

const props = defineProps<{
  mode: 'create' | 'edit';
  id?: number;
}>();

const emit = defineEmits(['update']);

const task_id = ref(0);
const task = ref('');
const description = ref('');
const mtce_type = ref('');
const wi_no = ref('');
const cur_tab = ref(false);
const final_tab = ref(false);

const $q = useQuasar();

function onClear() {
  task.value = '';
  description.value = '';
  cur_tab.value = false;
  final_tab.value = false;
  mtce_type.value = '';
}

async function onEdit() {
  const res = await editCurTask(
    task_id.value,
    task.value,
    description.value,
    cur_tab.value,
    final_tab.value,
    mtce_type.value,
    wi_no.value
  );
  try {
    if (res.data) {
      $q.notify({
        message: 'success',
        color: 'positive',
      });
      emit('update');
    }
  } catch (error) {
    console.log(error);
  }
}

async function onCreate() {
  try {
    const res = await createTask(
      task.value,
      description.value,
      cur_tab.value,
      final_tab.value,
      mtce_type.value,
      wi_no.value
    );
    if (res.data) {
      $q.notify({
        message: 'success',
        color: 'positive',
      });
      onClear();
      emit('update');
    }
  } catch (error) {
    console.log(error);
  }
}

async function onOk() {
  if (props.mode == 'create') {
    onCreate();
  }
  if (props.mode == 'edit') {
    onEdit();
  }
}

async function getCurTaskData(id: number) {
  const res = await getCurTask(id);
  if (res.data) {
    task_id.value = res.data.id;
    task.value = res.data.task;
    description.value = res.data.description;
    cur_tab.value = res.data.cur_tab;
    final_tab.value = res.data.final_tab;
    mtce_type.value = res.data.mtce_type;
    wi_no.value = res.data.wi_no;
  }
}

if (props.mode == 'edit' && props.id) {
  getCurTaskData(props.id);
}

/* async function onDelete() {
  const res = await deleteCurTask(props.id);
  try {
    if (res.data) {
      $q.notify({
        message: 'success',
        color: 'positive',
      });
      emit('update')
    }
  } catch (error) {
    console.log(error);
  }
} */
</script>
